import { useState, forwardRef, useImperativeHandle } from "react";
import styles from "./index.module.less";
import { IconClose } from "@arco-design/web-react/icon";
const InviteGiftUrlInfo = forwardRef(
  (
    props: {
      children: any;
      title?: string;
      width?: number;
    },
    ref
  ) => {
    const { title = "默认弹窗" } = props;
    const [pageState, setPageState] = useState(false);

    useImperativeHandle(ref, () => {
      return {
        getPage,
        hidePage,
      };
    });

    const getPage = () => {
      setPageState(true);
    };

    const hidePage = () => {
      setPageState(false);
    };

    return pageState ? (
      <div className={styles.custom_dialog_warp}>
        <div className="custom_dialog-content">
          <div className="custom_dialog-head">
            <div className="title">{title}</div>
            <IconClose
              fontSize={20}
              onClick={hidePage}
              className="closeBtn"
              style={{ color: "#000" }}
            ></IconClose>
          </div>
          <div className="detail-content">
            {props.children && props.children}
          </div>
        </div>
      </div>
    ) : (
      ""
    );
  }
);

export default InviteGiftUrlInfo;
